<template>
	<div id="app">
		<div class="content">
			<router-view/>
		</div>
		<div class="bottom-bar">
			<my-bottom-nav class="mu-bottom-nav" :menus="menus" :current="menus[2].value"/>
		</div>
	</div>
</template>

<script>
import MyBottomNav from '@/pages/components/public/MyBottomNav'

export default {
	name: 'App',
	components: {
		MyBottomNav,
	},
	data() {
		return {
			menus: [
				{value: 'home', title: '首页', icon: 'home', to: '/home'},
				{value: 'explore', title: '发现', icon: 'explore', to: '/explore'},
				{value: 'cart', title: '购物车', icon: 'shopping_cart', to: '/cart'},
				{value: 'me', title: '我的', icon: 'mood', to: '/me'},
			],
		}
	},

	methods: {
		openLoading() {
			this.$vs.loading({
				background: '#49A28C',
				color: 'white',
				type:'corners'
			})
			setTimeout(() => {
				this.$vs.loading.close()
			}, 4000);
		},
	},
	created() {
		this.openLoading()
	}
}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
	/* region 全局底部导航*/
	.mu-bottom-nav {
		width: 100% !important;
	}
	.bottom-bar {
		bottom: 0;
		width: 100%;
		position: sticky;
		z-index: 99;
	}
	/* endregion */
	/* region 其他重要 CSS**/
	.con-slot-tabs {
		width: calc(100% - 80px) !important;
	}
	.vs-tabs--btn i ~ span {
		padding-left: 8px;
	}
	.mu-item-wrapper{
		margin: 10px 0;
	}
	/* endregion **/
	/* region Cart页面CSS */
	.mu-pagination-item.mu-button{
		display: none;
	}
	.mu-pagination-item.mu-button.is-current{
		display: block;
	}
	.mu-pagination>ul li{
		margin: 0 !important;
	}
	.mu-pagination__circle .mu-pagination-item.mu-button{
		width: 25px !important;
		min-width: 25px;
		height: 25px;
	}
	.mu-pagination__circle .mu-pagination-btn.mu-button{
		width: 25px !important;
		height: 25px !important;
	}
	#my-mu-btn > div.mu-button-wrapper{
		padding: 0;
	}
	/* endregion Cart页面*/
	/** Explore 页面*/
	.mu-tab-link-highlight {
		background-color: #49A28C !important;
		height: 6px !important;
		padding: 0 20px;
		border-radius: 3px;
	}
</style>
